<template>
  <div class="">
    <header>
      <van-nav-bar
        placeholder
        title="购物车"
        :left-text="editTap"
        @click-left="onClickLeft"
      />
    </header>
    <div style="height: 50px"></div>
    <div v-show="$store.state.shoppingList.length == 0" class="imgLogin">
      <img
        src=""
        alt=""
      />
    </div>

    <van-swipe-cell v-for="(v, i) in shoppingList" :key="i">
      <div class="card">
        <div class="checkbox">
          <van-checkbox
            v-model="v.checked"
            checked-color="#ee0a24"
          ></van-checkbox>
        </div>
        <img :src="v.pic" alt="" />
        <ul>
          <li v-html="v.name"></li>
          <li>{{ v.upobj }} {{ v.botobj }}</li>
          <li>
            <p class="p">￥{{ v.minPrice }}</p>
            <p><van-stepper v-model="v.num" /></p>
          </li>
        </ul>
      </div>
      <template #right>
        <van-button
          @click="removerCommodity(v)"
          square
          text="删除"
          type="danger"
          class="delete-button"
        />
      </template>
    </van-swipe-cell>

    <van-submit-bar
      placeholder
      :price="$store.getters.total * 100"
      :button-text="deleteText"
      @submit="removeAlls"
    >
      <van-checkbox
        @click="checkAllChange"
        v-model="checkAll"
        checked-color="#ee0a24"
        >全选</van-checkbox
      >
    </van-submit-bar>
    <love></love>
  </div>
</template>

<script>
import { ref, watch, computed, toRefs, reactive } from "vue";
import { useStore } from "vuex";
import love from "@/components/love/love.vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default {
  setup() {
    let checked = ref(false);
    let checkedAll = ref(false);
    let store = useStore();
    let checkAll = ref(true);
    let shoppingList = computed(() => store.state.shoppingList);
    let minNum = ref(0); // 小计
    let router = useRouter();
    let obj = reactive({
      editTap: "编辑", // 编辑切换
      deleteText: "下单",
    });
    store.commit("checkAllChange", checkAll.value);

    function checkAllChange() {
      console.log(checkAll.value);
      store.commit("checkAllChange", checkAll.value);
    }

    function onClickLeft() {
      if (obj.editTap == "完成") {
        obj.editTap = "编辑";
        obj.deleteText = "下单";
      } else {
        checkAll.value = false;
        store.commit("checkAllChange", checkAll.value);
        obj.editTap = "完成";
        obj.deleteText = "删除";
      }
    }

    watch(
      () => shoppingList.value,
      (value) => {
        checkAll.value = value.every((element) => element.checked);
      },
      { deep: true, immediate: true }
    );

    //   删除初选中  和下单
    function removeAlls() {
      console.log(1);
      if (obj.deleteText == "删除") {
        Toast.success("删除成功");
        store.commit("removeAll");
      } else {
        if (shoppingList.value.length == 0) {
          Toast.fail("你还没商品，快去添加一些商品吧！");
        } else {
          router.push({ path: "/order" });
        }
      }
    }

    function removerCommodity(item) {
      store.commit("removerCommodity", item);
    }
    return {
      checked,
      checkedAll,
      shoppingList,
      checkAll,
      ...toRefs(obj),
      checkAllChange,
      minNum,
      onClickLeft,
      removeAlls,
      removerCommodity,
    };
  },
  components: {
    love,
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-button--round {
  border-radius: 0 !important;
  margin: 0;
}
.imgLogin {
  width: 100%;
  height: 700px;
  margin-bottom: 70px;
  img {
    width: 100%;
    height: 100%;
  }
}
.card {
  width: 100%;
  height: 220px;
  background-color: rgb(255, 255, 255);
  margin: 20px 0;
  padding: 0 10px;
  display: flex;
  .checkbox {
    margin: 85px 20px;
  }
  img {
    height: 100%;
    width: 200px;
    margin: 0 30px;
  }
  font-size: 26px;
  ul {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    li {
      width: 100%;
      &:nth-child(3) {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .p {
        margin-right: 130px;
        color: red;
      }
    }
  }
}

::v-deep.van-submit-bar {
  bottom: 120px;
  border: 1px solid rgb(231, 222, 222);
}

header {
  border-radius: 0 !important;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
}
::v-deep .van-button--square {
  height: 100%;
}
</style>
